import { useRef, useEffect, useState } from "react";
import Skeleton from "@/components/Skeleton";
import styles from "./style.module.css";
import clsx from "clsx";

const ListItem = ({ data }) => {
  const imgRef = useRef<any>(null);
  const [imgVisible, setImgVisible] = useState(false);
  useEffect(() => {
    const intersectionOb = new IntersectionObserver(
      (entries) => {
        if (entries[0].intersectionRatio <= 0) return;
        setImgVisible(true);
      },
      { threshold: 1 }
    );

    intersectionOb.observe(imgRef.current);
  }, []);
  return (
    <div className="h-[120px] bg-white flex flex-col justify-between">
      <div className="flex px-[24px] py-[15px]">
        <div className="w-[90px] h-[90px] shrink-0 mr-[40px]">
          <Skeleton
            loaded={imgVisible}
            className="w-full h-full rounded-full"
            ref={imgRef}
          >
            {/* <div className="mask"></div> */}
            <img
              src={data.url}
              alt=""
              onLoad={() => {
                // console.log("img loaded");
              }}
            />
          </Skeleton>
        </div>
        <div className="flex flex-col justify-center flex-1">
          <p className={styles.listItemName}>{data.nickname}</p>
          <p className={styles.listItemPhone}>{data.phone}</p>
        </div>
      </div>
      <div
        className={clsx("h-[1px] bg-[#E7EBEF] w-full", styles.hairline)}
      ></div>
    </div>
  );
};

export default ListItem;
